<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
	</head>

	<body>
			<div id="shopcart" class="shop-cart">
				<div class="tabs">
					<div class="border">
						<!-- data-*表示自定义属性。 -->
						<div class="title active" data-index="0">
							全部商品
							<span class="count">3</span>
						</div>
						<div class="title" data-index="1">
							降价商品
							<span class="count">0</span>
						</div>
						<div class="title last" data-index="2">
							库存紧张
							<span class="count">0</span>
						</div>
						<div class="line"></div>
					</div>
				</div>

				<div class="lists">
					<div class="header">
						<ul class="clearfix">
							<li>
								<input type="checkbox" class="select-all">
								<label>全选</label>
							</li>
							<li class="product-info">商品信息</li>
							<li>单价</li>
							<li>数量</li>
							<li>金额</li>
							<li>操作</li>
						</ul>
					</div>
					<div id="shoplist" class="shoplist">
						<!-- 店铺内容及样式参考 -->
						<div class="shop">
							<div class="shop-info">
								<div v-for="shop in shops" :key="shop.shopId">
									<input type="checkbox">
										<span class="shop-tip">店铺：
											<a class="shop-name" href="#">
												{{shop.shopName}}
											</a>
										</span>
									<a href="#" class="wangwang"></a>




									<div class="products">
										<div class="item" v-for="shp in shops.products">
											<div class="select-logo">
												<input type="checkbox">
												<img v-bind:src="item.topImg">
											</div>
											<div class="product-detail">
												<div class="left">
													<a href="#" class="product-name">
														罗蒙夏季休闲裤男薄款大码长裤宽松直筒男裤冰丝超薄西裤男士裤子
													</a>
													<div class="logos">
														<a href="#" class="card"></a>
														<a href="#" class="service"></a>
														<a href="#" class="order"></a>
														<a href="#" class="seven"></a>
													</div>
												</div>
												<div class="right">
													<p></p>
													<p></p>
												</div>
											</div>
											<div class="price">
												<p class="market-price"></p>
												<p class="real-price"></p>
											</div>
											<div class="count">
												<span class="sub">-</span>
												<span class="input"><input type="text" value="2"></span>
												<span class="add">+</span>
											</div>
											<div class="amount"></div>
											<div class="delete">
												<a href="#">删除</a>
											</div>
										</div>
									</div>
								</div>	
							</div>
						</div>
					</div>
				</div>
						<!--<div class="shop">
							<div class="shop-info">
								<input type="checkbox">
									<span class="shop-tip">店铺：
										<a class="shop-name" href="#">
											<div v-for="shop in shops" :key="shop.shopId">
												{{shop.shopName}}
											</div>
										</a>
									<a href="#" class="wangwang">旺旺</a>
								</span>
							</div>
							<div class="products">
								<div class="item">
									<div class="select-logo">
										<input type="checkbox">
										<img src="img/6.jpg" alt="产品logo">
									</div>
									<div class="product-detail">
										<div class="left">
											<a href="#" class="product-name">
												罗蒙夏季休闲裤男薄款大码长裤宽松直筒男裤冰丝超薄西裤男士裤子
											</a>
											<div class="logos">
												<a href="#" class="card">信用卡</a>
												<a href="#" class="service">保障服务</a>
												<a href="#" class="order">订单险</a>
												<a href="#" class="seven">7天无理由</a>
											</div>
										</div>
										<div class="right">
											<p>颜色：宝蓝色【5023款】+宝蓝色【5023】</p>
											<p>尺码：28[腰围2尺10]</p>
										</div>
									</div>
									<div class="price">
										<p class="market-price">￥200</p>
										<p class="real-price">￥168</p>
									</div>
									<div class="count">
										<span class="sub">-</span>
										<span class="input"><input type="text" value="2"></span>
										<span class="add">+</span>
									</div>
									<div class="amount">￥336</div>
									<div class="delete">
										<a href="#">删除</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="operate">
					<div class="left">
						<input type="checkbox" class="select-all-footer">
						<a href="javascript:void(0);">删除</a>
					</div>

					<div class="right">
						<div>已选择商品<span class="selected-count">0</span>件</div>
						<div class="amount">合计（不含运费）： <span class="sum">￥0.00</span></div>
						<a href="javascript:void(0);" class="settle">结算</a>
					</div>
				</div>
			</div>-->
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			// 实现头部的动画
			var titles = document.querySelectorAll('.title')
			var line = document.querySelector('.line')
			for (let i = 0; i < titles.length; i++) {
				titles[i].addEventListener('mouseenter', function() {
					for (var j = 0; j < titles.length; j++) {
						titles[j].classList.remove('active')
					}
					this.classList.add('active')
					line.style.left = i * line.offsetWidth + 'px'
				})
			}
		</script>
		<script>
			const shoplist = Vue.createApp({
				data(){
					return{
						shops:shopcarts,
					};
				}
			}).mount('#shoplist');
		</script>
	</body>

</html>
